<template>
  <h1>组合API-watch函数-监听reactive响应式对象</h1>
  <h2>{{ obj }}</h2>
  <button @click="obj.name += '呀'">点我呀一声</button>
  <button @click="obj.age++">点我小马大一岁</button>
  <button @click="obj.cp.age++">点我CP大一岁</button>
</template>

<script>
import { reactive, watch } from 'vue'
export default {
  name: 'App',
  setup() {
    // 定义响应式对象数据
    const obj = reactive({
      name: '小马',
      age: 18,
      cp: {
        name: '如花',
        age: 38,
      },
    })

    // 监听 reactive 定义的响应式数据
    //   特点1：newVal === oldVal，根本就是同一个内容地址，就是对象本身
    //   特点2：reactive() 对象默认是深度监听，能监听到所有的子属性的变化
    // 注意点：
    //   💥 如果监听的属性值是基本类型数据，需要写成函数返回该属性的方式才能监听到

    watch(
      () => obj.age,
      val => {
        console.log('小马老一岁要发红包', val)
      },
    )

    // 返回给模板使用
    return { obj }
  },
}
</script>